<template>
    <div>
        <dialog-alert :data="alertData" @on-close="onCloseAlert()" @on-confirm="onConfirm()">
            <div class="dialog-alert">
                <table>
                    <tr>
                        <td>已有标签：</td>
                        <td>
                            <div v-if="labelArr.length != 0">
                                <div class="label" v-for="(item, index) in labelArr" :key="item.lid">
                                    <span>{{ item.l_name }}</span>
                                    <i class="el-icon el-tag__close" @click.prevent="deleteLabel(item, index)"><svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path></svg></i>
                                </div>
                            </div>
                            <div v-else><div><span style="color: var(--pc-font-black);">无</span></div></div>
                        </td>
                    </tr>
                    <tr>
                        <td>添加标签：</td>
                        <td>
                            <el-cascader v-model="selectLabel" placeholder="请选择标签" :options="typeLabelList" :show-all-levels="false" :props="{multiple: true}"/>
                        </td>
                    </tr>
                </table>
            </div>
        </dialog-alert>
    </div>
</template>

<script setup lang="ts">
import { handleElCascaderOptions, handleTypeLidID } from "@/utils/util"
import { ElMessage } from "element-plus"
import { onMounted, ref, toRefs } from "vue"
import manageTypeLabelStore from "../../../manage-type-label/manage-type-label.store"

const manageTypeLabelSe = manageTypeLabelStore()

const props = defineProps({
    addTypeLabelData: {
        type: Object,
        default: {}
    }
})
const { addTypeLabelData } = toRefs(props)

// 获取全部标签信息
let labelArr = ref<any>([])
let selectLabel = ref<any>([])
let typeLabelList = ref<any>([])
const getTypeLabelList = () => {
    manageTypeLabelSe.getTypeLabelList().then((res: any) => {
        if(res.status == 'success') {
            addTypeLabelData.value.typeLabelListById ? labelArr.value = JSON.parse(JSON.stringify(addTypeLabelData.value.typeLabelListById.label)) : []
            typeLabelList.value = handleElCascaderOptions(res.results, addTypeLabelData.value)
        }
    })
}
onMounted(() => {
    getTypeLabelList()
})

// 删除标签
let deleteLabelArr = ref<any>([])
const deleteLabel = (item: any, index: number) => {
    deleteLabelArr.value.push(labelArr.value.slice(index, index + 1)[0].lid)
    labelArr.value.splice(index, 1)
    typeLabelList.value.forEach((item1: any) => {
        if(item1.value == item.tid) {
            item1.children.forEach((item2: any) => {
                if(item2.value == item.lid) item2.disabled = false
            })
        }
    })
}

const emits = defineEmits(['closeAddTypeLabelAlert'])
// 添加诗歌信息
const alertData = {
    title: '添加分类与标签',
    confirmTitle: '添加',
    isShowCancleBtn: true,
    cancleTitle: '取消',
    isShowClose: true,
}
// 点击取消/关闭
const onCloseAlert = () => {
    emits('closeAddTypeLabelAlert')
}
// 点击添加
const onConfirm = () => {
    if(selectLabel.value.length == 0 && deleteLabelArr.value == 0) {
        ElMessage({
            showClose: true,
            message: '当前未对标签信息做任何修改，如不修改标签信息，可点击取消关闭按钮',
            type: 'error',
        })
        return
    }
    const { addLidString, deleteLidString } = handleTypeLidID(selectLabel.value, deleteLabelArr.value)
    const data = {
        pid: addTypeLabelData.value.pid,
        addLidString: addLidString,
        deleteLidString: deleteLidString
    }
    manageTypeLabelSe.getAddPoetryLabelByPid(data).then((res: any) => {
        if(res.status == 'success') {
            ElMessage({
                showClose: true,
                message: '添加诗歌标签成功！',
                type: 'success',
            })
            emits('closeAddTypeLabelAlert', true)
        } else {
            ElMessage({
                showClose: true,
                message: '添加诗歌标签失败！',
                type: 'error',
            })
        }
    })
}
</script>

<style lang="less" scoped>

</style>